<template>
    <div v-loading="loading">
        <vue-office-pptx
            :src="ppt"
            style="height: 100vh;width: 100vw;background-color: #f8f8f8"
            @rendered="renderedHandler"
            @error="errorHandler"
        />
        <!-- <div class="disbaled-cover">
            <div class="price-box">
                <el-button round type="danger" @click="toVip">{{ fee }}解锁</el-button>
            </div>
        </div> -->

        <NeedPay :query="query" />
        
    </div>
</template>

<script>
//引入VueOfficePdf组件
import { useRoute } from 'vue-router';
import VueOfficePptx from '@vue-office/pptx'
import NeedPay from './NeedPay.vue';
import wx from 'weixin-js-sdk';
export default {
    name: "VueOfficePdfDemo",
    components: {
        VueOfficePptx,
        NeedPay
    },
    data() {
        return {
            loading: true,
            ppt: '', //设置文档地址 http://192.168.1.54:8080/test.pptx

            query: {}
        }
    },
    methods: {
        renderedHandler() {
            this.loading = false;
            console.log("渲染完成")
        },
        errorHandler() {
            this.loading = false;
            console.log("渲染失败")
        },

        toVip(){
            wx.miniProgram.navigateTo({
                url: `/pages/mine/vip/vip`
            })
        }
    },
    created(){
        const route = useRoute();
        console.log('query', route.query);
        if(route.query.file){
            this.ppt = decodeURIComponent(route.query.file);
        }
        this.query = route.query;

        // this.needpay = route.query.np == 1;
        // this.fee = route.query.pri || 0;
    }
};
</script>
<style>
.pptx-preview-wrapper{
		background: gray!important;
	}

</style>

<style scoped>




</style>